﻿{% extends "base.html" %}

{% block link %}
    <link href="/static/css/detail.css" rel="stylesheet"/>
    <link href="/static/css/blog.css" rel="stylesheet"/>
    <link href="/static/css/comment.css" rel="stylesheet"/>
    <!-- jquery -->
    <script src="/static/js/jquery.min.js"></script>
{% endblock %}

{% block style %}
    <style type="text/css">
        .collection {
            /*收藏*/
            display: block;
            margin: 0 auto;
            width: 98px;
            line-height: 34px;
            text-indent: 45px;
            border: 1px solid #3791ef;
            color: #3791ef;
            border-radius: 4px;
            font-size: 14px;
            background: url("/static/images/collect_icons.png") 21px 7px no-repeat;
            overflow: hidden;
        }

        .collection:hover {
            background: url("/static/images/collect_icons.png") 21px -33px no-repeat;
        }

        .collected {
            /*取消收藏*/
            width: 120px;
            height: 36px;
            margin: 0 auto;
            line-height: 34px;
            text-indent: 45px;
            color: #666;
            border-radius: 4px;
            font-size: 14px;
            background: url("/static/images/collect_icons.png") 15px -73px no-repeat #e6e6e6;
            position: relative;
            overflow: hidden;
        }

        .f {
            width: 100%; /* 设置输入框的宽度 */
        }

        #te {
            width: 100%;
        }

        .f #comment_textarea {
            resize: none; /* 禁止调整文本框大小 */
            overflow-wrap: break-word; /* 使用换行符或单词边界进行换行 */
            word-wrap: break-word;
            max-width: 100%;
            max-height: 100px; /* 设置最大高度，超过后会出现滚动条 */
        }

        .comment_list {
            padding-top: 40px;
            width: 700px;
            margin: 0 auto;
        }

        .comment_details {
            float: left;
        }

        .comment_content {
            margin-top: 10px;
            font-size: 16px;
        }

        .comment_add_or_last {

            margin: 0 auto;
            clear: both;
            width: 600px;
            height: 40px;
            background: #F0F0F0;
            text-align: center;
            line-height: 40px;
        / / 行高（与div保持同高，垂直居中写法）
        }

        .imgdiv {
            float: left;

        }

        .imgcss {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .comment_name {
            margin-left: 10px;
            color: #3D9EEA;
            font-size: 15px;
            font-weight: bolder;
        }

        .layui-icon {
            font-size: 10px;
            color: grey;
        }

        .del {
            margin-left: 55px;
        }
    </style>
{% endblock %}
{#{% include "include/nav.html" %}#}

{% block body %}
    <div class="blog-body">

    <div class="blog-container">
        <div class="blog-main">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
                <a href="/" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
                <a href="/article" title="文章专栏">文章专栏<span class="layui-box">&gt;</span></a>
                <a><cite class="title">{{ article.title }}</cite></a>
            </blockquote>
            <div class="blog-main">

                <div id="parentArticleList" class="blog-main-left animated slideInLeft">

                    <div class="article-detail shadow">
                        <div class="article-detail-title title">{{ article.title }}</div>
                        <div class="article-detail-info">
                            <span>编辑时间：{{ article.create_at }}</span>
                            <span>作者：{{ article.source }}</span>
                            <span>浏览量：{{ clicks }}</span>
                        </div>
                        <div id="articleContent" style="overflow: hidden;" class="article-detail-content">
                            <p style="color: #c2be9e">{{ article.digest }}</p>
                            {{ article.content|safe }}
                        </div>
                        <a href="javascript:;" class="collection block-center"
                           style="display: {% if not is_collected %} block {% else %} none {% endif %}">收藏</a>
                        <a href="javascript:;" class="collected block-center"
                           style="display: {% if is_collected %} block {% else %} none {% endif %}">
                            <span class="out">已收藏</span>
                            <span class="over">   取消</span>
                        </a>
                    </div>

                    <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                            <legend>来说两句吧</legend>
                            <div class="layui-field-box">
                                {% if not current_user %}
                                    <div class="comment_form_logout">
                                        <a href="/login">
                                            <button class="layui-btn">登录发表评论</button>
                                        </a>
                                    </div>
                                {% else %}
                                    <form class="layui-form f">
                                        <input type="hidden" id="user" name="user_id" lay-verify="userId"
                                               value="{{ current_user.id }}">
                                        <input type="hidden" id="article" name="article_id"
                                               value="{{ article.id }}">
                                        <input type="text"
                                               name="comment" lay-verify="required" id="comment_textarea"
                                               class="layui-input" placeholder="留下你的足迹..." value="">

                                        {#                                            <input type="text"#}
                                        {#                                                   name="comment" lay-verify="required" id="comment_textarea"#}
                                        {#                                                   class="layui-input" placeholder="留下你的足迹...">#}

                                        <hr>
                                        <button class="layui-btn" lay-submit lay-filter="comment_submit">评论
                                        </button>
                                        <button class="layui-btn layui-btn-danger" type="reset" id="test-btn-other">
                                            重置
                                        </button>
                                    </form>
                                {% endif %}
                            </div>
                        </fieldset>
                        <div class="blog-module-title ">最新评论</div>

                        {% for comment in article.comment_list %}

                            <div class="comment" data-comment-id="{{ comment.id }}">
                            <div class="imgdiv"><img class="imgcss" src="/static/images/user.jpg"
                                                     style="width: 20px;height: 20px"></div>
                            <div class="conmment_details">
                                {% if comment.user_id == article.user_id %}
                                    <span class="comment_name">{{ comment.user.nick_name }} </span>
                                    <span class="is_bloger">博主</span>&nbsp;
                                {% else %}
                                    <span class="comment_name">{{ comment.user.nick_name }} </span>
                                {% endif %}
                                <span>{{ comment.create_at }}</span>
                                <div class="comment_content">
                                    <div class="layui-row">
                                        <div class="layui-col-4" style="border: 1px ">
                                            {{ comment.content }}
                                        </div>
                                        {# 如果有父级评论id，则显示子评论 #}
                                        {% if comment.parent_id %}
                                            <div class="reply_text_con">
                                                <div class="user_name2"> {{ comment.user.nick_name }}
                                                    > {{ comment.parent.user.nick_name }} </div>
                                                <div class="reply_text">
                                                    {{ comment.parent.content }}
                                                </div>
                                            </div>


                                        {% endif %}
                                        {# 如果当前用户登录则可以回复点赞 #}
                                        {% if current_user %}
                                            <div class="layui-col-4 layui-col-sm-offset8 layui-col-md-offset8 layui-col-lg-offset8 comment-details">
                                            <a href="javascript:;" class="comment_reply"><i
                                                    class="icon layui-icon layui-icon-dialogue">回复</i></a>
                                            <a href="javascript:;" class="comment_up
                                            {# 当前用户点赞是否高亮 #}
                                         {% for user_cmt_like in current_user.comment_like_list.all() %}
                                         {#  #}
                                             {% if user_cmt_like.comment.id == comment.id %}
                                             has_comment_up
                                             {% endif %}
                                        {% endfor %}"><i class="icon layui-icon layui-icon-praise">赞</i></a>


                                        {% else %}
                                            <div class="layui-col-4 layui-col-sm-offset8 layui-col-md-offset8 layui-col-lg-offset8 comment-details">
                                            <a href="javascript:unlogin();" class="comment_reply" id="unlogin_reply"><i
                                                    class="icon layui-icon layui-icon-dialogue ">回复</i></a>
                                            <a href="javascript:unlogin();" class="comment_up"></a>
                                            <a href="javascript:unlogin();" id="unlogin_praise"><i
                                                    class="icon layui-icon layui-icon-praise">赞</i></a>
                                        {% endif %}


                                        <i class="icon layui-icon">
                                            {%- if comment.comment_like_list.count() > 0 -%}
                                                {{ comment.comment_like_list.count() }}
                                            {% else %}
                                                0
                                            {%- endif -%}人赞过
                                        </i>
                                        </div>
                                        <form class="reply_form">
                                            <div>
                                                <textarea class="reply_input"></textarea>
                                                <div class="sub_submit">
                                                    <input type="submit" name="" value="回复" class="reply_sub">
                                                    <input type="reset" name="" value="取消"
                                                           class="reply_cancel">
                                                </div>
                                            </div>
                                        </form>
                                        </div>

                                        {#                                            <div class="del layui-text-end">#}
                                        {#                                                #}
                                        {#                                            </div>#}
                                    </div>

                                </div>
                                <hr>
                            </div>
                        {% endfor %}

                        </div>
                    </div>

                    <div class="blog-main-right ">

                        <div class="category-toggle "><i class="fa fa-chevron-left "></i></div>

                        <div class="article-category shadow ">
                            <div class="article-category-title ">分类导航</div>
                            {% for cate in cate_list %}
                                {% if cate.id==1 %}
                                    <a href="/">{{ cate.name }}</a>
                                {% else %}
                                    <a href="/article?cid={{ cate.id }}">{{ cate.name }}</a>
                                {% endif %}
                            {% endfor %}
                            <div class="clear "></div>
                        </div>
                        <div class="blog-module shadow ">
                            <div class="blog-module-title ">相似文章</div>
                            <ul class="blog-module-ul ">
                                <li>
<span>
<i class="layui-badge-rim layui-bg-red ">1</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring Boot 表单验证@Valid</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim layui-bg-orange ">2</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 使用 JSP</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim layui-bg-green ">3</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 下的 Spring mvc</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">4</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 自定义配置</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">5</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 的核心配置文件</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">6</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">第一个 Spring boot 程序及解析</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">7</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 开发环境</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">8</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">SpringBoot简介</a>
                                </li>
                            </ul>
                        </div>
                        <div class="blog-module shadow ">
                            <div class="blog-module-title ">随便看看</div>
                            <ul class="blog-module-ul ">
                                <li>
<span>
<i class="layui-badge-rim layui-bg-red ">1</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Centos7安装和配置Tomcat8</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim layui-bg-orange ">2</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">支付宝开发者入驻</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim layui-bg-green ">3</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">redis requires Ruby version &gt;= 2.2.2问题</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">4</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Spring boot 开发环境</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">5</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Tomcat优化性能，JVM优化</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">6</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Centos7安装和配置jre1.8</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">7</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">怎么关闭eclipse对js xml的验证?</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">8</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">centos7对外开放端口</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">9</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">Java设计模式-单例模式</a>
                                </li>
                                <li>
<span>
<i class="layui-badge-rim ">10</i>
</span>
                                    &nbsp;&nbsp;<a href="detail.html ">解决Tomcat中项目Url带中文参数乱码</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clear "></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/layui2/layui/layui.js"></script>
    <script src="/static/js/global.js"></script>
    {#    <script src="/static/js/about.js "></script>#}
    <script src="/static/js/detail.js "></script>
    <script src="/static/js/main.js "></script>
    <script src="/static/js/api.js"></script>
{% endblock %}
</div>